<template>
  <div class="video-monitor-page">
    <!-- 顶部导航栏 -->
    <header class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon>
            <VideoCameraFilled />
          </el-icon>
          网络监控多平台融合项目
        </h1>
        <div class="header-actions">
          <el-button type="primary" class="back-home-btn" @click="handleBackHome">
            <el-icon>
              <HomeFilled />
            </el-icon>
            返回首页
          </el-button>
          <el-button type="text" class="refresh-btn" @click="refreshAllVideos">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新全部
          </el-button>
          <el-button type="text" class="fullscreen-btn" @click="toggleFullscreen">
            <el-icon>
              <FullScreen />
            </el-icon>
            全屏显示
          </el-button>
        </div>
      </div>
    </header>

    <!-- 视频监控区域 -->
    <main class="video-container">
      <!-- 监控布局切换器 -->
      <div class="layout-switcher">
        <!-- <el-radio-group v-model="currentLayout" size="small">
          <el-radio-button label="1">1画面</el-radio-button>
          <el-radio-button label="4">4画面</el-radio-button>
          <el-radio-button label="6" class="active">6画面</el-radio-button>
        </el-radio-group> -->
      </div>

      <!-- 视频网格布局 -->
      <div class="video-grid" :class="gridClass">
        <div v-for="(video, index) in visibleVideos" :key="index" class="video-card">
          <div class="video-header">
            <div class="video-title">
              <el-icon class="camera-icon">
                <VideoCamera />
              </el-icon>
              {{ video.title }}
            </div>
            <div class="video-status">
              <span class="status-item">
                <span class="status-dot online"></span>
                在线
              </span>
              <!-- <span class="status-item">
                <el-icon>
                  <Clock />
                </el-icon>
                {{ video.updateTime }}
              </span> -->
            </div>
          </div>

          <div class="video-content">
            <div class="video-player-wrapper">
              <video :id="'video-' + video.id" :src="video.url" class="video-player" autoplay muted loop
                :poster="video.poster"></video>

              <!-- 视频控制覆盖层 -->
              <div class="video-controls-overlay">
                <el-button type="text" class="control-btn" @click="togglePlayPause(video.id)">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                </el-button>
                <el-button type="text" class="control-btn" @click="handleVideoOperate(video.id, 'fullscreen')">
                  <el-icon>
                    <FullScreen />
                  </el-icon>
                </el-button>
                <el-button type="text" class="control-btn" @click="handleVideoOperate(video.id, 'snapshot')">
                  <el-icon>
                    <Camera />
                  </el-icon>
                </el-button>
              </div>
            </div>

            <!-- 视频信息栏 -->
            <div class="video-info">
              <span class="info-item">
                <el-icon>
                  <Connection />
                </el-icon>
                画质: {{ video.quality }}
              </span>
              <!-- <span class="info-item">
                <el-icon>
                  <ArrowUpBold />
                </el-icon>
                {{ video.traffic }}
              </span> -->
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 监控系统状态面板 -->
    <!-- <div class="system-status-panel">
      <div class="panel-content">
        <div class="status-item">
          <el-progress :percentage="onlineCameras" :color="onlineCameras === 100 ? '#00b42a' : '#165dff'"
            :stroke-width="16" status="success"></el-progress>
          <span class="status-text">在线率: {{ onlineCameras }}%</span>
        </div>

        <div class="status-item">
          <el-progress :percentage="storageUsage" :color="getStorageColor(storageUsage)"
            :stroke-width="16"></el-progress>
          <span class="status-text">存储使用: {{ storageUsage }}%</span>
        </div>

        <div class="status-item">
          <el-progress :percentage="networkLoad" :color="getNetworkColor(networkLoad)" :stroke-width="16"></el-progress>
          <span class="status-text">网络负载: {{ networkLoad }}%</span>
        </div>

        <div class="status-item alerts">
          <el-badge :value="alertCount" type="danger">
            <el-button type="text" class="alert-btn" @click="showAlerts">
              <el-icon>
                <Bell />
              </el-icon>
              告警信息
            </el-button>
          </el-badge>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

// 视频数据
const videoList = ref([
  {
    id: 1,
    // title: "主监控区域 - 总览平台",
    url: require("@/assets/videos/1.mp4"),
    platformName: "融合总控平台",
    updateTime: "2025-07-20 15:30:45",
    poster: require("@/assets/videos/1.jpg"),
    quality: "高清",
    traffic: "2.4 Mbps",
    isPlaying: false,
  },
  {
    id: 2,
    // title: "子监控区域 - 电网传输平台",
    url: require("@/assets/videos/2.mp4"),
    platformName: "电网传输平台",
    updateTime: "2025-07-20 15:28:12",
    poster: require("@/assets/videos/2.jpg"),
    quality: "高清",
    traffic: "1.8 Mbps",
    isPlaying: true,
  },
  {
    id: 3,
    // title: "子监控区域 - 无人机巡检平台",
    url: require("@/assets/videos/3.mp4"),
    platformName: "无人机巡检平台",
    updateTime: "2025-07-20 15:29:36",
    poster: require("@/assets/videos/3.jpg"),
    quality: "高清",
    traffic: "1.2 Mbps",
    isPlaying: true,
  },
  {
    id: 4,
    // title: "子监控区域 - 安防监控平台",
    url: require("@/assets/videos/4.mp4"),
    platformName: "安防监控平台",
    updateTime: "2025-07-20 15:31:02",
    poster: require("@/assets/videos/4.jpg"),
    quality: "高清",
    traffic: "2.1 Mbps",
    isPlaying: true,
  },
  {
    id: 5,
    // title: "子监控区域 - 环境监测平台",
    url: require("@/assets/videos/5.mp4"),
    platformName: "环境监测平台",
    updateTime: "2025-07-20 15:27:58",
    poster: require("@/assets/videos/5.jpg"),
    quality: "高清",
    traffic: "0.9 Mbps",
    isPlaying: true,
  },
  {
    id: 6,
    // title: "子监控区域 - 设备状态平台",
    url: require("@/assets/videos/6.mp4"),
    platformName: "设备状态平台",
    updateTime: "2025-07-20 15:30:15",
    poster: require("@/assets/videos/6.jpg"),
    quality: "高清",
    traffic: "1.5 Mbps",
    isPlaying: true,
  },
]);

// 布局控制
const currentLayout = ref("6");
const visibleVideos = computed(() => {
  if (currentLayout.value === "1") {
    return [videoList.value[0]];
  } else if (currentLayout.value === "4") {
    return videoList.value.slice(0, 4);
  } else {
    return videoList.value;
  }
});

const gridClass = computed(() => {
  if (currentLayout.value === "1") {
    return "grid-layout-1";
  } else if (currentLayout.value === "4") {
    return "grid-layout-4";
  } else {
    return "grid-layout-6";
  }
});

// 系统状态
// const onlineCameras = ref(100);
// const storageUsage = ref(25);
// const networkLoad = ref(40);
// const alertCount = ref(0);

// 返回首页
const handleBackHome = () => {
  router.push("/home");
};

// 刷新所有视频
const refreshAllVideos = () => {
  videoList.value.forEach((video) => {
    video.isPlaying = false;
    setTimeout(() => {
      const videoEl = document.getElementById(`video-${video.id}`);
      if (videoEl) {
        videoEl.load();
        videoEl.play().catch((err) => {
          console.log(`视频 ${video.id} 自动播放失败:`, err);
        });
      }
      video.isPlaying = true;
      video.updateTime = new Date().toLocaleTimeString();
    }, 500);
  });
  ElMessage({
    message: "所有视频已刷新",
    type: "success",
    duration: 1500,
  });
};

// 切换全屏
const toggleFullscreen = () => {
  const docEl = document.documentElement;

  if (!document.fullscreenElement) {
    if (docEl.requestFullscreen) {
      docEl.requestFullscreen();
    } else if (docEl.mozRequestFullScreen) {
      // Firefox
      docEl.mozRequestFullScreen();
    } else if (docEl.webkitRequestFullscreen) {
      // Chrome, Safari
      docEl.webkitRequestFullscreen();
    } else if (docEl.msRequestFullscreen) {
      // IE/Edge
      docEl.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
};

// 视频操作
const handleVideoOperate = (videoId, type) => {
  if (type === "fullscreen") {
    const videoEl = document.getElementById(`video-${videoId}`);
    if (videoEl) {
      if (videoEl.requestFullscreen) {
        videoEl.requestFullscreen();
      } else if (videoEl.mozRequestFullScreen) {
        videoEl.mozRequestFullScreen();
      } else if (videoEl.webkitRequestFullscreen) {
        videoEl.webkitRequestFullscreen();
      } else if (videoEl.msRequestFullscreen) {
        videoEl.msRequestFullscreen();
      }
    }
  } else if (type === "snapshot") {
    // 模拟截图功能
    ElMessage({
      message: `已截取视频 ${videoId} 的画面`,
      type: "success",
      duration: 1500,
    });
  }
};

// 切换视频播放/暂停
const togglePlayPause = (videoId) => {
  const videoEl = document.getElementById(`video-${videoId}`);
  const video = videoList.value.find((v) => v.id === videoId);

  if (videoEl) {
    if (videoEl.paused) {
      videoEl.play().catch((err) => {
        console.log(`视频 ${videoId} 播放失败:`, err);
      });
      video.isPlaying = true;
    } else {
      videoEl.pause();
      video.isPlaying = false;
    }
  }
};

// 显示告警信息
// const showAlerts = () => {
//   if (alertCount.value > 0) {
//     ElMessage({
//       message: '暂无新告警信息',
//       type: 'info',
//       duration: 2000
//     });
//   } else {
//     ElMessage({
//       message: '当前系统运行正常，没有告警信息',
//       type: 'success',
//       duration: 2000
//     });
//   }
// };

// 获取存储进度条颜色
// const getStorageColor = (percentage) => {
//   if (percentage < 70) return '#00b42a';
//   if (percentage < 90) return '#e6a23c';
//   return '#f56c6c';
// };

// 获取网络负载进度条颜色
// const getNetworkColor = (percentage) => {
//   if (percentage < 60) return '#165dff';
//   if (percentage < 85) return '#e6a23c';
//   return '#f56c6c';
// };

// 组件挂载时初始化视频
onMounted(() => {
  videoList.value.forEach((video) => {
    const videoEl = document.getElementById(`video-${video.id}`);
    if (videoEl) {
      videoEl.muted = true; // 自动播放需要静音
      videoEl.play().catch((err) => {
        console.log(`视频 ${video.id} 自动播放失败:`, err);
      });
    }
  });
});
</script>

<style scoped>
.video-monitor-page {
  width: 100%;
  min-height: 100vh;
  background-color: #0f172a;
  color: #e2e8f0;
  overflow-x: hidden;
}

/* 页面头部样式 */
.page-header {
  background-color: #1e293b;
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.header-content {
  max-width: 1920px;
  margin: 0 auto;
  height: clamp(3.5rem, 5vw, 4.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.page-title .el-icon {
  margin-right: clamp(0.5rem, 1vw, 0.75rem);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: #3b82f6;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.back-home-btn {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  padding: clamp(0.375rem, 0.75vw, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
}

.back-home-btn:hover {
  background-color: #2563eb;
}

.refresh-btn,
.fullscreen-btn {
  color: #cbd5e1;
  transition: all 0.3s;
  padding: clamp(0.375rem, 0.75vw, 0.5rem);
}

.refresh-btn:hover,
.fullscreen-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 布局切换器 */
.layout-switcher {
  max-width: 1920px;
  margin: clamp(1.5rem, 2vw, 2rem) auto clamp(1rem, 1.5vw, 1.25rem);
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  display: flex;
  justify-content: flex-end;
}

.layout-switcher .el-radio-button__inner {
  background-color: #1e293b;
  color: #94a3b8;
  border-color: #334155;
  padding: clamp(0.375rem, 0.75vw, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
}

.layout-switcher .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: -1px 0 0 0 #3b82f6;
}

/* 视频网格布局 */
.video-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(3rem, 4vw, 4rem);
}

.video-grid {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.25rem);
}

.grid-layout-1 {
  grid-template-columns: 1fr;
}

.grid-layout-4 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-layout-6 {
  grid-template-columns: repeat(3, 1fr);
}

/* 视频卡片 */
.video-card {
  background-color: #1e293b;
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid #334155;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* 视频头部 */
.video-header {
  padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 1.5vw, 1.25rem);
  background-color: #1e293b;
  border-bottom: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.video-title {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 500;
  color: #ffffff;
  display: flex;
  align-items: center;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-icon {
  margin-right: clamp(0.5rem, 0.75vw, 0.625rem);
  color: #3b82f6;
}

.video-status {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.25rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
  white-space: nowrap;
}

.status-item {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
}

.status-dot {
  width: clamp(0.5rem, 0.75vw, 0.625rem);
  height: clamp(0.5rem, 0.75vw, 0.625rem);
  border-radius: 50%;
  margin-right: clamp(0.375rem, 0.5vw, 0.5rem);
  flex-shrink: 0;
}

.online {
  background-color: #00b42a;
}

/* 视频内容区域 */
.video-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-player-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 比例 */
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000000;
}

/* 视频控制覆盖层 */
.video-controls-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(1rem, 1.5vw, 1.25rem);
  gap: clamp(1rem, 1.5vw, 1.25rem);
}

.video-player-wrapper:hover .video-controls-overlay {
  opacity: 1;
}

.control-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 50%;
  width: clamp(2.25rem, 3vw, 2.5rem);
  height: clamp(2.25rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 视频信息栏 */
.video-info {
  padding: clamp(0.5rem, 0.75vw, 0.625rem) clamp(1rem, 1.5vw, 1.25rem);
  background-color: rgba(30, 41, 59, 0.8);
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  color: #94a3b8;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .el-icon {
  margin-right: clamp(0.25rem, 0.375vw, 0.375rem);
}

/* 系统状态面板 */
.system-status-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1e293b;
  border-top: 1px solid #334155;
  padding: clamp(0.75rem, 1vw, 1rem) 0;
  z-index: 100;
}

.panel-content {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(1rem, 2vw, 1.5rem);
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(18%, 20%, 22%);
}

.status-text {
  margin-top: clamp(0.5rem, 0.75vw, 0.625rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
  color: #cbd5e1;
}

.alerts {
  width: clamp(8%, 10%, 12%);
}

.alert-btn {
  color: #f56c6c;
  font-size: clamp(0.875rem, 1vw, 1rem);
}

/* 响应式适配 */
@media (max-width: 1600px) {
  .grid-layout-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1440px) {
  .grid-layout-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {

  .grid-layout-4,
  .grid-layout-6 {
    grid-template-columns: 1fr;
  }

  .panel-content {
    flex-wrap: wrap;
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }

  .status-item {
    width: clamp(40%, 45%, 50%);
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
  }

  .header-actions {
    gap: clamp(0.375rem, 0.5vw, 0.5rem);
  }

  .back-home-btn span {
    display: none;
  }

  .layout-switcher {
    justify-content: center;
  }

  .video-title {
    max-width: 60%;
  }
}

@media (max-width: 576px) {
  .header-content {
    height: clamp(3rem, 4vw, 3.5rem);
  }

  .page-title {
    font-size: clamp(0.875rem, 1.25vw, 1rem);
  }

  .panel-content {
    flex-direction: column;
    gap: clamp(1.5rem, 2vw, 2rem);
  }

  .status-item {
    width: 100%;
  }

  .video-title {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .video-title {
    font-size: clamp(0.875rem, 1vw, 1rem);
  }

  .video-status {
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
    gap: clamp(0.75rem, 1vw, 1rem);
  }

  .video-info {
    flex-direction: column;
    gap: clamp(0.375rem, 0.5vw, 0.5rem);
  }
}

@media (min-width: 1920px) {
  .video-container {
    max-width: 100%;
    padding: 0 clamp(2rem, 3vw, 3rem) clamp(4rem, 5vw, 5rem);
  }

  .grid-layout-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
